<template>
	<view class="welfare">
		<view class="welfare-top">
			<block-progress :width="350" :percent="welfare_warehouse" :label="'zkb'"></block-progress>
		</view>
		<!-- <view class="quick">
			<view class="price">
				<text>当前价格：</text>
				<text>¥{{sub_price}} / 1zkb</text>
			</view>
			<view class="quick-input">
				<input type="text" v-model="val" placeholder="请输入数量" @blur="blurInput"/>
			</view>
			<view class="quick-lists">
				<view class="quick-list" v-for="(item,index) of quick" 
				:key="index" @click="handleSelect(item)">
					<text :style="{borderColor: item==val ? '#2C405A' :''}">{{item}}</text>
				</view>
			</view>
			<view class="btn">
				<button type="default" :style="{background:!disabled?'#2C405A':'',
				color:!disabled?'#ffffff':'#2C405A'}" :disabled="disabled" @click="btn()">立即获取</button>
			</view>
			<view class="model" v-if="Number(welfare_warehouse)<Number(buy_limit)">
				<text>暂未开放，请耐心等待！</text>	
			</view>
		</view> -->
		<!-- #ifdef APP-PLUS -->
		<news-flow :type="1"></news-flow>
		<!-- #endif -->
		<view class="rule">
			<view class="title">
				<text>公益中心说明</text>
			</view>
			<view class="rule-content">
				<rich-text :nodes="detail.content"></rich-text>
			</view>
		</view>
		<!-- 充值方式 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="lists">
					<view class="list" v-for="(item,index) of recharge_mode" 
					:key="index" @click="selePay(item.id)">
						<view class="list-left">
							<image :src="require(`../../../../static/images/pay_${item.id}.png`)" mode=""></image>
							<view class="list-left-txt">
								<text>{{item.name}}</text>
								<text>{{item.remarks}}</text>
							</view>
						</view>
						<view class="list-right">
							<text class="iconfont" :class="{'icon-duihao':item.id===payId}"></text>
						</view>
					</view>
				</view>
				<view class="pay-price">
					<text>支付金额</text>
					<text>¥ {{price}}</text>
				</view>
				<view class="btn">
					<text>充值</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getAllConfig,getRules} from "@/api/entrance.js"
	import BlockProgress from "@/components/BlockProgress/BlockProgress.vue"
	export default{
		name:"welfare",
		components:{
			BlockProgress
		},
		data(){
			return{
				disabled:true,
				val:'',
				welfare_warehouse:0,
				min:0,//最小限购
				max:0,//最大限购
				sub_price:0,//价格
				buy_limit:0,//可购买
				quick:[100,300,500,1000,2000,3000],
				recharge_mode:[],//充值方式
				payId:1,
				detail:{}
			}
		},
		onLoad() {
			this.getConfig()
			this.getAgreement();
		},
		methods:{
			async getAgreement(){
				let res = await getRules({
					keyword:'welfare_rule'
				})
				if(res.code ===1){
					if(res.data.length){
						res.data[0].content = res.data[0].content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;" ')
						this.detail = res.data[0]
					}
				}
			},
			selePay(id){
				this.payId = id
;			},
			btn(){
				if(Number(this.welfare_warehouse)<Number(this.buy_limit)){
					return;
				}
				this.$refs.popup.open()
			},
			blurInput(){
				if(Number(this.val)<Number(this.min)){
					this.val = this.min
					return
				}
				if(Number(this.val)>Number(this.max)){
					this.val = this.max
					return
				}
			},
			handleSelect(val){
				if(Number(val)<Number(this.min)){
					this.val = this.min
					return
				}
				if(Number(val)>Number(this.max)){
					this.val = this.max
					return
				}
				this.val = val
			},
			
			async getConfig(){
				let res = await getAllConfig({type:1});
				if(res.code === 1){
					res.data.forEach((item)=>{
						if(item.keyword=='welfare_warehouse'){
							this.welfare_warehouse = Number(item.value).toFixed(3)
						}
						if(item.keyword=='sub_num'){
							let obj = JSON.parse(item.value)
							this.min = obj.min
							this.max = obj.max
						}
						if(item.keyword=='sub_price'){
							this.sub_price = item.value
						}
						if(item.keyword=='buy_limit'){
							this.buy_limit = item.value
						}
						if(item.keyword=='recharge_mode'){
							this.recharge_mode = JSON.parse(item.value)
						}
					})
				}
			}
		},
		computed:{
			price(){
				return (Number(this.val)*Number(this.sub_price)).toFixed(2)
			}
		},
		watch:{
			val(newVal){
				this.disabled = !newVal
			}
		}
	}
</script>

<style lang="less" scoped src="./welfare.less">
</style>
